import MyNavBar from '../../components/navbar'
import { Button, Card, Form, Input, Radio, Space, Toast } from 'antd-mobile'
import { CameraOutline } from 'antd-mobile-icons'
import { postPsgApi, editPsgApi, ocrApi } from '../../api/psg'
import styles from './css/psg-add.module.css'
import { useLocation, useNavigate } from 'react-router-dom'
import { useRef } from 'react'

function PsgAdd() {
  const nav = useNavigate()
  const { state: info } = useLocation()
  // 这个 ref 指向的就是文件选择器的 DOM 元素
  const fileRef = useRef(null)
  const [form] = Form.useForm()

  const onFinish = async (values) => {
    try {
      if (info) {
        // info 有值，说明是修改
        await editPsgApi(values)
      } else {
        // 新增的接口
        await postPsgApi(values)
      }

      nav(-1)
    } catch {
      Toast.show('身份证号已被使用！')
    }
  }

  // 点击按钮，模拟文件选择器的点击行为
  const chooseFile = () => {
    fileRef.current?.click()
  }

  // 当选择了文件后，会自动触发 fileChange 回调，
  // 通过形参可以拿到选择的文件
  const fileChange = (e) => {
    // 获取用户选择的文件的数组
    const files = e.target.files
    // 没有选择图片，直接 return，后面代码就不执行了
    if (files.length === 0) return

    // 把用户选择的文件，从二进制文件，转为 base64 的字符串
    const fr = new FileReader()
    // fr.readAsDataURL(需要转换的二进制的文件)
    fr.readAsDataURL(files[0])
    fr.onload = async () => {
      // 已经把二进制的文件，转成了 base64 的字符串
      // console.log(fr.result)
      // 调用接口识别身份证图片
      const { data: res } = await ocrApi({
        client_id: '8rPEJllCplDr9LhhzyJShoti',
        client_secret: 'ITJIibpkU4InHIdtBfqoqzY4g7GKredF',
        image: fr.result
      })

      // 把识别成功的数据，回填到表单中
      form.setFieldsValue({
        // 左侧的键是：表单项的 name
        // 右侧的值是：接口返回的数据
        p_type: res.ticket_type,
        name: res.name,
        c_type: res.card_type,
        card_no: res.code
      })
    }
  }

  return (
    <div className={styles.box}>
      <MyNavBar title="乘客管理" />

      {/* OCR 按钮 */}
      <Button
        block
        color="primary"
        fill="outline"
        style={{ backgroundColor: '#fff' }}
        onClick={chooseFile}
      >
        <CameraOutline />
        <span style={{ marginLeft: '5px' }}>扫描证件添加</span>
      </Button>

      {/* 文件选择器 */}
      <input
        type="file"
        // 只允许选择图片类型的文件
        accept="image/*"
        // 隐藏元素
        style={{ display: 'none' }}
        // 绑定 ref
        ref={fileRef}
        // 当选择了文件后，会自动触发 fileChange 回调，
        // 通过形参可以拿到选择的文件
        onChange={fileChange}
      />

      {/* 表单 */}
      <Card style={{ marginTop: '15px' }}>
        <Form
          form={form}
          // 为表单项设置默认值
          initialValues={info || { p_type: '成人票', c_type: '中国大陆身份证' }}
          // 当表单校验通过后，会调用 onFinish 函数
          onFinish={onFinish}
          mode="card"
          layout="horizontal"
          style={{ '--prefix-width': '60px' }}
          footer={
            <Button
              block
              type="submit"
              color="primary"
            >
              提交
            </Button>
          }
        >
          {/* 乘客的 id 编号 */}
          <Form.Item
            name="id"
            label="ID"
            style={{ display: 'none' }}
          >
            <Input placeholder="ID 编号" />
          </Form.Item>

          <Form.Item
            name="p_type"
            label="乘客类型"
            rules={[{ required: true, message: '请选择乘客类型' }]}
          >
            <Radio.Group>
              <Space direction="horizontal">
                <Radio value="成人票">成人票</Radio>
                <Radio value="儿童票">儿童票</Radio>
                <Radio value="学生票">学生票</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="name"
            label="乘客姓名"
            rules={[{ required: true, message: '请填写乘客姓名' }]}
          >
            <Input placeholder="与乘客证件姓名一致" />
          </Form.Item>

          <Form.Item
            name="c_type"
            label="证件类型"
            rules={[{ required: true, message: '请选择证件类型' }]}
          >
            <Radio.Group>
              <Space direction="horizontal">
                <Radio value="中国大陆身份证">中国大陆身份证</Radio>
                <Radio value="港澳居住证">港澳居住证</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="card_no"
            label="证件号码"
            validateFirst
            rules={[
              { required: true, message: '请填写证件号码' },
              {
                pattern: /^(\d{17}[xX]|\d{18})$/,
                message: '证件号码格式不正确'
              }
            ]}
          >
            <Input placeholder="请输入证件号码" />
          </Form.Item>

          <Form.Item
            name="phone"
            label="手机号码"
            validateFirst
            rules={[
              { required: true, message: '请填写手机号码' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
            ]}
          >
            <Input placeholder="请输入手机号码" />
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default PsgAdd
